<ion-header>

    <ion-navbar color="primary">
        <ion-title><span class="custom-font-size-t">Producción</span></ion-title>
        <ion-buttons end>
		    <ion-badge color="danger" *ngIf="this.prodData.odooCon.pending_calls.length > 0">
                {{ this.prodData.odooCon.pending_calls.length }}
            </ion-badge>
            <button ion-button full (click)="editNote()">
                <ion-icon name="create"></ion-icon>
            </button>
            <button ion-button full (click)="showConsumptions()">
                <ion-icon name="clipboard"></ion-icon>
            </button>
            <button ion-button (click)='openCalculatorModal()'>
                <ion-icon name="calculator"></ion-icon>
            </button>
            <button ion-button (click)='openUsersModal()'>
                <ion-icon name="people"></ion-icon>
            </button>
            <button ion-button (click)='reloadProduction()'>
                <ion-icon name="refresh"></ion-icon>
            </button>
            <button ion-button (click)='logOut()'>
                <ion-icon name="log-out"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div class="content-full">
        <div class="content-one">
            <ion-item [hidden]='prodData.workcenter' color="danger">No hay línea seleccionada</ion-item>
            <div class="grid1">
                <ion-grid text-center>
                    <ion-row>
                        <ion-col width-33>
                            <div class="info-tittle">Centro trabajo</div>
                        </ion-col>
                        <ion-col width-33>
                            <div class="info-tittle">Producción</div>
                        </ion-col>
                        <ion-col width-33>
                            <div class="info-tittle">Operario activo</div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col width-33>
                            <div class="info-content">{{prodData.workcenter.name}}</div>
                        </ion-col>
                        <ion-col width-33 (click)="openListProductionsModal()">
                            <div class="info-content">{{prodData.production}}</div>
                        </ion-col>
                        <ion-col width-33>
                            <div class="info-content">{{prodData.getActiveOperatorName()}}</div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col width-100>
                            <div class="info-tittle">Producto</div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col width-100>
                            <div class="info-content">{{prodData.product}}</div>
                            <div class="info-content" *ngIf="prodData.production_uos_qty !== 0">{{prodData.production_qty}} {{prodData.uom}} / {{prodData.production_uos_qty}} {{prodData.uos}}</div>
                            <div class="info-content" *ngIf="prodData.production_uos_qty === 0">{{prodData.production_qty}} {{prodData.uom}}</div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col width-100>
                            <div class="info-tittle" (click)='openUsersModal()'>Operarios&nbsp;<ion-icon name="person-add"></ion-icon></div>
                        </ion-col>
                    </ion-row>
                    <ion-row *ngIf="prodData.getLogInOperators().length !== 0">
                        <ion-col width-100>
                            <div class="info-content">{{prodData.getOperatorNames()}}</div>
                        </ion-col>
                    </ion-row>
                    <ion-row *ngIf="prodData.getLogInOperators().length === 0">
                         <ion-col width-100>
                            <div class="info-warning">SIN OPERARIOS LOGUEADOS</div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col width-100>
                            <div class="info-tittle">Consideraciones especiales</div>
                        </ion-col>
                    </ion-row>
                    <ion-row text-left>
                        <ion-col width-100>
                            <div class="info-content-wrap">{{prodData.bom_app_notes}}</div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
        </div>
        <div class="content-two">
            <ion-grid>
                <ion-row>
                    <ion-col text-center>
                        <span class="info-tittle">&nbsp;Tiempo transcurrido&nbsp;</span>
                    </ion-col>
                    <ion-col text-center width-50 *ngIf="prodData.state === 'stopped'">
                        <span class="info-tittle-red">&nbsp;Tiempo en parada&nbsp;</span>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col>
                        <button ion-button large block clear><timer [timeInSeconds]="0"></timer></button>
                    </ion-col>
                    <ion-col width-50 [ngClass]="hidden_class">
                        <button ion-button large block clear color="danger"><timer [timeInSeconds]="0"></timer></button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 1 -->
                <ion-row *ngIf="(prodData.state === 'waiting')">
                    <ion-col col-12>
                        <button class="btn" *ngIf="prodData.state == 'waiting'" (click)="confirmProduction()">
                            CONFIRMAR PRODUCCIÓN
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 2 -->
                <ion-row *ngIf="prodData.state == 'confirmed'">
                    <ion-col col-12>
                        <button class="btn" (click)="setupProduction()">
                            COMENZAR PREPARACIÓN
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 3 -->
                <ion-row *ngIf="prodData.state == 'setup'">
                    <ion-col col-3>
                         <button class="btn2" (click)="stopProduction()">
                            <ion-icon name="hand"></ion-icon>
                            PARAR
                        </button>
                    </ion-col>
                    <ion-col col-9>
                        <button class="btn" (click)="startProduction()">
                            EMPEZAR PRODUCCIÓN
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 5 -->
                <ion-row *ngIf="prodData.state == 'cleaning'">
                    <ion-col col-3>
                         <button class="btn2" (click)="stopProduction()">
                            <ion-icon name="hand"></ion-icon>
                            PARAR
                        </button>
                    </ion-col>
                    <ion-col col-9>
                        <button class="btn" (click)="finishProduction()">
                            FINALIZAR PRODUCCIÓN
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 6 -->
                <ion-row *ngIf="prodData.state == 'finished'">
                    <ion-col col-12>
                        <button class="btn2" (click)="loadNextProduction()">
                            SIGUIENTE
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA 4 -->
                <ion-row *ngIf="prodData.state === 'started'">
                    <ion-col width-33>
                         <button class="btn2" (click)="stopProduction()">
                            <ion-icon name="hand"></ion-icon>
                            PARAR
                        </button>
                    </ion-col>
                    <ion-col width-33>
                        <button class="btn" (click)="cleanProduction()">
                            EMPEZAR LIMPIEZA
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA PARADA NO EN LIMPIEZA-->
                <ion-row *ngIf="prodData.state === 'stopped' && prodData.odooCon.stop_from_state !== 'cleaning'">
                    <ion-col width-50>
                        <button class="btn" (click)="restartProduction()">
                            REANUDAR
                        </button>
                    </ion-col>
                    <ion-col width-50>
                        <button class="btn2" (click)="restartAndCleanProduction()">
                            REANUDAR <br> Y EMPEZAR LIMPIEZA
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA PARADA EN LIMPIEZA-->
                <ion-row *ngIf="prodData.state === 'stopped' && prodData.odooCon.stop_from_state === 'cleaning'">
                    <ion-col col-12>
                        <button class="btn" (click)="restartProduction()">
                            REANUDAR LIMPIEZA
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA SCRAP -->
                <ion-row *ngIf="(prodData.state == 'started') || (prodData.state == 'cleaning') ||
                               ((prodData.state == 'stopped') && show_create_mo == false)">
                     <ion-col text-center width-100>
                        <button ion-button round (click)="scrapProduction()" color="dark">
                            SCRAP
                        </button>
                    </ion-col>
                </ion-row>
        <!-- PANTALLA SCRAP Y ORDEN MANTENIMIENTO -->
                <ion-row *ngIf="(prodData.state == 'started') || (prodData.state == 'cleaning') ||
                               ((prodData.state == 'stopped') && show_create_mo == true)">
                    <ion-col text-center width-50>
                        <button ion-button round (click)="scrapProduction()" color="dark">
                            SCRAP
                        </button>
                    </ion-col>
                    <ion-col text-center width-50>
                        <button ion-button round (click)="createMaintenanceOrder()" color="dark">
                            ORDEN MANT
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </div>
</ion-content>

<ion-footer>
    <ion-item text-center color="primary"><span>{{prodData.states[prodData.state]}}</span></ion-item>
</ion-footer>

